<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增数据集')"/>
    <!-- 引入 Font Awesome 的 CSS -->
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">-->
    <link rel="stylesheet" href="/fontawesome-free-6.4.0-web/css/all.min.css">
<!--    &lt;!&ndash; 引入 SweetAlert2 CSS &ndash;&gt;-->
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css">-->

<!--    &lt;!&ndash; 引入 SweetAlert2 JS &ndash;&gt;-->
<!--    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>-->
    <script src="/sweetalert2-11.12.2/sweetalert2@11.js"></script>
    <style>
        /* 将高和宽输入框放在同一行 */
        .input-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .input-group .form-control {
            flex: 1; /* 输入框占据剩余空间 */
        }

        .input-group .form-control + .form-control {
            margin-left: 10px; /* 高和宽输入框之间的间距 */
        }

        /* 增加form-group的外边距 */
        .form-group {
            margin-bottom: 50px;
        }

        /* 增加label和input的字体大小 */
        .form-group label,
        .form-group input[type="file"],
        .form-group span.help-block {
            font-size: 16px; /* 或者你想要的任何值 */
        }

        #image-upload,
        #label-upload,
        #imageVal-upload,
        #labelVal-upload,
        #image-count,
        #label-count,
        #imageVal-count,
        #labelVal-count {
            /* 这里可以添加更多样式，例如字体大小、颜色等 */
            font-size: 18px; /* 示例字体大小 */
        }
        /*----------------------------------------------------------------------------------------*/
        /* 样式加载覆盖层 */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            display: none; /* 初始隐藏 */
            flex-direction: column; /* 垂直布局 */
        }

        /* 进度条容器 */
        .progress-container {
            width: 80%;
            background-color: #f3f3f3;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 20px;
        }

        /* 进度条 */
        .progress-bar {
            width: 0%;
            height: 20px;
            background-color: #3498db;
            text-align: center;
            line-height: 20px; /* 水平居中 */
            color: white;
            transition: width 0.3s; /* 平滑过渡 */
        }

        #loading-overlay p {
            font-size: 30px;
        }


    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-app01Dataset-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">数据集名称：</label>
            <div class="col-sm-8">
                <input id="name" name="name" class="form-control" type="text">
            </div>
        </div>

        <!--			<div class="form-group">	-->
        <!--				<label class="col-sm-3 control-label">图像数量：</label>-->
        <!--				<div class="col-sm-8">-->
        <!--					<input id="numPicture" name="numPicture" class="form-control" type="text">-->
        <!--				</div>-->
        <!--			</div>-->
        <!--			<div class="form-group">	-->
        <!--				<label class="col-sm-3 control-label">标签数量：</label>-->
        <!--				<div class="col-sm-8">-->
        <!--					<input id="numLabel" name="numLabel" class="form-control" type="text">-->
        <!--				</div>-->
        <!--			</div>-->

        <!-- 将高和宽输入框放在同一行 -->
        <div class="form-group">
            <label class="col-sm-3 control-label">尺寸：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input id="height" name="height" class="form-control" type="text" placeholder="高">
                    <input id="width" name="width" class="form-control" type="text" placeholder="宽">
                </div>
            </div>
        </div>

        <!--			<div class="form-group">	-->
        <!--				<label class="col-sm-3 control-label">上传时间：</label>-->
        <!--				<div class="col-sm-8">-->
        <!--					<input id="uploadTime" name="uploadTime" class="form-control" type="text">-->
        <!--				</div>-->
        <!--			</div>-->
        <!--			<div class="form-group">	-->
        <!--				<label class="col-sm-3 control-label">归属用户：</label>-->
        <!--				<div class="col-sm-8">-->
        <!--					<input id="userId" name="userId" class="form-control" type="text">-->
        <!--				</div>-->
        <!--			</div>-->
        <!--			<div class="form-group">	-->
        <!--				<label class="col-sm-3 control-label">数据集位置：</label>-->
        <!--				<div class="col-sm-8">-->
        <!--					<input id="location" name="location" class="form-control" type="text">-->
        <!--				</div>-->
        <!--			</div>-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-3 control-label">是否公开：</label>-->
        <!--            <div class="col-sm-8">-->
        <!--                <input id="isPublic" name="isPublic" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->

        <div class="form-group">
            <label class="col-sm-3 control-label">上传图片：</label>
            <div class="col-sm-8">
<!--                只能上传jpg,jpeg,png,tif,tiff格式的图片 -->
                <input id="image-upload" type="file" accept="image/jpeg,image/png,image/jpg,image/tiff,image/tif" multiple>
<!--                <input id="image-upload" type="file" accept="image/*" multiple>-->
                <span id="image-count" class="help-block">上传的图片数量：0</span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">上传标签：</label>
            <div class="col-sm-8">
<!--                <input id="label-upload" type="file" accept="image/*,.json" multiple>-->
                <input id="label-upload" type="file" accept="image/*,.json" multiple>
                <span id="label-count" class="help-block">上传的标签数量：0</span>
            </div>
        </div>

        <!--                <div class="form-group">-->
        <!--                    <label class="col-sm-3 control-label">上传验证图片：</label>-->
        <!--                    <div class="col-sm-8">-->
        <!--                        <input id="imageVal-upload" type="file" accept="image/*" multiple>-->
        <!--                        <span id="imageVal-count" class="help-block">上传的验证图片数量：0</span>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                <div class="form-group">-->
        <!--                    <label class="col-sm-3 control-label">上传验证标签：</label>-->
        <!--                    <div class="col-sm-8">-->
        <!--                        <input id="labelVal-upload" type="file" multiple>-->
        <!--                        <span id="labelVal-count" class="help-block">上传的验证标签数量：0</span>-->
        <!--                    </div>-->
        <!--                </div>-->

        <!-- 添加是否公开的选项 -->
        <div class="form-group">
            <label class="col-sm-3 control-label">是否公开：</label>
            <div class="col-sm-8">
                <input type="radio" id="public-yes" name="is-public" value="yes">
                <label for="public-yes" style="margin-right: 10px;">是</label>
                <input type="radio" id="public-no" name="is-public" value="no" checked>
                <label for="public-no">否</label>
            </div>
        </div>


        <!-- 加载覆盖层 -->
        <div id="loading-overlay" style="display: none;">
            <div class="spinner"></div>
            <p>请耐心等待...</p>
            <div class="progress-container">
                <div class="progress-bar" id="progress-bar">0%</div>
            </div>
        </div>
    </form>


</div>
<div th:include="include::footer"></div>


<script type="text/javascript">
    var prefix = ctx + "deep_learning/app01Dataset"

    // 监测变化，获取是否公开的选项
    $("input[name='is-public']").change(function () {
        isPublic = $("input[name='is-public']:checked").val();
        console.log("isPublic:", isPublic)
    });
    // var imageFormData = new FormData();
    // var maskFormData = new FormData();
    // var imageValFormData = new FormData();
    // var maskValFormData = new FormData();

    var formData = new FormData();

    $("#form-app01Dataset-add").validate({
        rules: {
            xxxx: {
                required: true,
            },
        },
        focusCleanup: true
    });

    function validateFileType(files, validTypes) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var fileType = file.type;
            var fileExtension = file.name.split('.').pop().toLowerCase();

            // 检查文件类型和扩展名是否符合要求
            if (!validTypes.includes(fileType) && !validTypes.includes(fileExtension)) {
                return false;
            }
        }
        return true;
    }

    function submitHandler() {
        // 使用正则表达式检查是否为数字
        var numberRegex = /^\d+$/;
        var heightValue = document.getElementById('height').value;
        var widthValue = document.getElementById('width').value;
        var imageUpload = document.getElementById('image-upload').files;
        var labelUpload = document.getElementById('label-upload').files;

        var validImageTypes = ['image/jpeg', 'image/png', 'image/tiff', 'jpg', 'jpeg', 'png', 'tif', 'tiff'];
        var validLabelTypes = ['image/png', 'json', 'png', 'json'];

        // 校验上传的图片类型
        // if (!validateFileType(imageUpload, validImageTypes)) {
        //     Swal.fire({
        //         icon: 'error',
        //         title: '错误',
        //         text: '请上传符合要求的图片类型 (jpg, jpeg, png, tif, tiff)',
        //         showConfirmButton: true,
        //         allowOutsideClick: false,
        //         allowEscapeKey: false
        //     });
        //     return;  // 阻止表单提交
        // }
        //
        // // 校验上传的标签类型
        // if (!validateFileType(labelUpload, validLabelTypes)) {
        //     Swal.fire({
        //         icon: 'error',
        //         title: '错误',
        //         text: '请上传符合要求的标签类型 (png, json)',
        //         showConfirmButton: true,
        //         allowOutsideClick: false,
        //         allowEscapeKey: false
        //     });
        //     return;  // 阻止表单提交
        // }


        // console.log(heightValue)
        // console.log(widthValue)
        var name = document.getElementById('name').value;
        $.ajax({
            url: prefix + "/checkDatasetNameUnique",
            type: "GET",
            data: { name: name },
            success: function(response) {
                if (response) {
                    Swal.fire({
                        icon: 'error',
                        title: '错误',
                        text: '名称已存在，请使用其他名称',
                        showConfirmButton: true,
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    });
                } else {
                    if ($.validate.form()
                        // && (document.getElementById('image-count').textContent.split('：')[1] == document.getElementById('label-count').textContent.split('：')[1])
                        // && (document.getElementById('imageVal-count').textContent.split('：')[1] == document.getElementById('labelVal-count').textContent.split('：')[1])
                        && document.getElementById('name').value != '' && document.getElementById('height').value != '' && document.getElementById('width').value != ''
                        && document.getElementById('image-count').textContent.split('：')[1] != '0'
                        // && document.getElementById('label-count').textContent.split('：')[1] != '0'
                        // && document.getElementById('imageVal-count').textContent.split('：')[1] != '0' && document.getElementById('labelVal-count').textContent.split('：')[1] != '0'
                        && numberRegex.test(heightValue)
                        && numberRegex.test(widthValue)

                    ) {

                        // console.log($('#form-app01Dataset-add').serialize());
                        console.log('image-count' + document.getElementById('image-count').textContent.split('：')[1])
                        console.log('label-count' + document.getElementById('label-count').textContent.split('：')[1])
                        // console.log('imageVal-count' + document.getElementById('imageVal-count').textContent.split('：')[1])
                        // console.log('labelVal-count' + document.getElementById('labelVal-count').textContent.split('：')[1])

                        //在这加发送给后端的请求

                        // 获取id='name'的元素的value(数据集名称)
                        var nameValue = document.getElementById('name').value;
                        formData.append('datasetName', nameValue);
                        // console.log( document.getElementById('height').value)
                        formData.append('height', document.getElementById('height').value);
                        formData.append('width', document.getElementById('width').value);
                        // console.log("height:"+document.getElementById('height').value);
                        // console.log("width:"+document.getElementById('width').value);
                        // 获取是否公开的选项
                        var isPublicValue = $("input[name='is-public']:checked").val();
                        // 如果是公开的，则将 isPublicValue 置为 1，否则置为 0
                        if (isPublicValue == 'yes') {
                            isPublicValue = 1;
                        } else {
                            isPublicValue = 0;
                        }
                        formData.append('isPublic', isPublicValue);

                        // 显示加载覆盖层和进度条
                        var overlay = document.getElementById('loading-overlay');
                        var progressBar = document.getElementById('progress-bar');
                        overlay.style.display = 'flex';
                        progressBar.style.width = '0%';
                        progressBar.textContent = '0%';

                        // 创建 XMLHttpRequest 对象
                        var xhr = new XMLHttpRequest();

                        // 处理上传进度事件
                        xhr.upload.addEventListener('progress', function (event) {
                            if (event.lengthComputable) {
                                var percentComplete = Math.round((event.loaded / event.total) * 100);
                                progressBar.style.width = percentComplete + '%';
                                progressBar.textContent = percentComplete + '%';
                            }
                        });

                        // 处理上传完成事件
                        xhr.addEventListener('load', function () {
                            /*读取服务器返回的String数据*/
                            var responseText = xhr.responseText;
                            console.log(responseText);
                            if (xhr.status === 200 && responseText!=="图片和标签文件格式不匹配" ) {
                                // console.log("延迟执行")
                                Swal.fire({
                                    icon: 'success',
                                    title: '文件上传成功',
                                    showConfirmButton: false,
                                    timer: 1000
                                }).then(function () {
                                    $('#form-app01Dataset-add').serialize();
                                    $.modal.close();
                                })
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: '错误',
                                    text:responseText,
                                    showConfirmButton: true,
                                    timer: 5000
                                });
                            }
                            overlay.style.display = 'none'; // 隐藏加载覆盖层
                        });

                        // 处理上传错误事件
                        xhr.addEventListener('error', function () {
                            Swal.fire({
                                icon: 'error',
                                title: '上传出错，请重试',
                                showConfirmButton: false,
                                timer: 2000
                            });
                            overlay.style.display = 'none'; // 隐藏加载覆盖层
                        });

                        // 设置请求
                        xhr.open('POST', '/deep_learning/app01Dataset/uploadDataset');
                        xhr.send(formData);


                    } else {
                        // 验证失败的处理
                        if (document.getElementById('name').value == '' || document.getElementById('height').value == '' || document.getElementById('width').value == '') {
                            $.modal.alert('表格信息未填写完整！');
                        }
                            // else if ((document.getElementById('image-count').textContent.split('：')[1] !== document.getElementById('label-count').textContent.split('：')[1]) ||
                            //     (document.getElementById('image-count').textContent.split('：')[1] !== document.getElementById('label-count').textContent.split('：')[1])) {
                            //     $.modal.alert('图片与标签数量不匹配，请重新上传！');
                        // }
                        else if (document.getElementById('image-count').textContent.split('：')[1] == '0')
                            // || document.getElementById('label-count').textContent.split('：')[1] == '0')
                            // || document.getElementById('imageVal-count').textContent.split('：')[1] == '0'
                            // || document.getElementById('labelVal-count').textContent.split('：')[1] == '0')
                        {
                            // $.modal.alert('请上传图片和标签！');
                            $.modal.alert('请上传图片！');
                        } else {
                            // console.log(numberRegex.test(widthValue.trim()))
                            // console.log(numberRegex.test(heightValue.trim()))
                            $.modal.alert('图片尺寸请输入数字！');
                        }
                    }
                }
            },
            error: function(xhr, status, error) {
                Swal.fire({
                    icon: 'error',
                    title: '请求失败',
                    text: '检查任务名称失败，请稍后重试',
                    showConfirmButton: true,
                    allowOutsideClick: false,
                    allowEscapeKey: false
                });
            }
        });

        // window.parent.postMessage('refreshTable', '*');
        }


        $(document).ready(function () {
            // 上传图片
            $('#image-upload').on('change', function () {
                formData.delete('image-upload'); // 清空之前的图片文件
                var files = $(this)[0].files; // 获取文件列表
                var fileCount = files.length; // 获取文件数量

                if (files.length > 0) {
                    for (var i = 0; i < files.length; i++) {
                        formData.append('image-upload', files[i]);
                        // console.log("文件名:", files[i].name)
                    }
                }
                // for (var value of imageFormData.values()) {
                //     console.log(value); // 这将打印出 File 或 Blob 对象，或其他值
                // }
                // 更新显示文件数量的 span 元素
                var imageCountSpan = document.getElementById('image-count');
                imageCountSpan.textContent = '上传的训练图片数量：' + fileCount;
            });


            // 上传标签
            $('#label-upload').on('change', function () {
                formData.delete('label-upload'); // 清空之前的图片文件
                var files = $(this)[0].files; // 获取文件列表
                var fileCount = files.length; // 获取文件数量

                if (files.length > 0) {
                    for (var i = 0; i < files.length; i++) {
                        formData.append('label-upload', files[i]);
                        console.log("文件名:", files[i].name)
                    }
                }
                var imageCountSpan = document.getElementById('label-count');
                imageCountSpan.textContent = '上传的训练标签数量：' + fileCount;
            });

            // 上传验证图片
            $('#imageVal-upload').on('change', function () {
                var files = $(this)[0].files; // 获取文件列表
                var fileCount = files.length; // 获取文件数量

                if (files.length > 0) {
                    for (var i = 0; i < files.length; i++) {
                        formData.append('imageVal-upload', files[i]);
                        // console.log("文件名:", files[i].name)
                    }
                }
                var imageCountSpan = document.getElementById('imageVal-count');
                imageCountSpan.textContent = '上传的验证图片数量：' + fileCount;
            });

            // 上传验证标签
            $('#labelVal-upload').on('change', function () {
                var files = $(this)[0].files; // 获取文件列表
                var fileCount = files.length; // 获取文件数量

                if (files.length > 0) {
                    for (var i = 0; i < files.length; i++) {
                        formData.append('labelVal-upload', files[i]);
                        // console.log("文件名:", files[i].name)
                    }
                }
                var imageCountSpan = document.getElementById('labelVal-count');
                imageCountSpan.textContent = '上传的验证标签数量：' + fileCount;
            });
            // window.parent.postMessage('refreshTable', '*');

        });

</script>

<!--上传mask-->
<script>
    $(document).ready(function () {
        // 上传 Mask 文件
        $('#uploadMaskButton').click(function () {
            Swal.fire({
                title: '请输入数据集名称',
                input: 'text',
                inputPlaceholder: '数据集名称',
                showCancelButton: true,
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                inputValidator: (value) => {
                    if (!value) {
                        return '数据集名称不能为空！';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    var fileName = result.value; // 获取输入的数据集名称

                    // 创建一个文件输入框
                    var fileInput = document.createElement('input');
                    fileInput.type = 'file';
                    fileInput.multiple = true; // 允许多文件选择
                    fileInput.style.display = 'none';
                    document.body.appendChild(fileInput);

                    // 文件选择后触发的事件
                    fileInput.addEventListener('change', function (event) {
                        var files = event.target.files;
                        if (files.length > 0) {
                            var formData = new FormData();
                            for (var i = 0; i < files.length; i++) {
                                formData.append('files', files[i]);
                            }

                            // 添加文件名到 FormData
                            formData.append('fileName', fileName);

                            // 发送文件到后端
                            $.ajax({
                                url: '/uploadMask', // 后端控制器的请求路径
                                type: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                success: function (response) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: '文件上传成功',
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                    console.log(response);
                                },
                                error: function (xhr, status, error) {
                                    Swal.fire({
                                        icon: 'error',
                                        title: '文件上传失败',
                                        text: '错误信息: ' + error,
                                        showConfirmButton: false,
                                        timer: 2000
                                    });
                                    console.error('请求失败:', error);
                                }
                            });
                        }
                    });

                    // 手动触发文件输入框的点击事件以打开文件选择框
                    fileInput.click();
                }
            });
        });

        $('#uploadModelButton').click(function () {
            Swal.fire({
                title: '请上传模型文件',
                input: 'file',
                inputAttributes: {
                    'accept': '.py', // 仅限 .py 文件
                    'multiple': false // 不允许多文件
                },
                showCancelButton: true,
                confirmButtonText: '上传',
                cancelButtonText: '取消',
                didOpen: () => {
                    const fileInput = Swal.getInput();
                    fileInput.addEventListener('change', function (event) {
                        const file = event.target.files[0];
                        if (file) {
                            var formData = new FormData();
                            formData.append('file', file); // 确保字段名是 'file'
                            formData.append('fileName', file.name.replace('.py', ''));

                            console.log("File to be uploaded:", file);
                            console.log("FormData entries:");
                            for (var pair of formData.entries()) {
                                console.log(pair[0] + ': ' + pair[1]);
                            }

                            // 发送文件到后端
                            $.ajax({
                                url: '/uploadModel', // 后端控制器的请求路径
                                type: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                success: function (response) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: '文件上传成功',
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                    console.log("文件信息", response);
                                },
                                error: function (xhr, status, error) {
                                    Swal.fire({
                                        icon: 'error',
                                        title: '文件上传失败',
                                        text: '错误信息: ' + error,
                                        showConfirmButton: false,
                                        timer: 2000
                                    });
                                    console.error('请求失败:', error);
                                }
                            });
                        }
                    });
                }
            });
        });


        // 上传验证集
        $('#uploadValButton').click(function () {
            Swal.fire({
                title: '请输入验证集名称',
                input: 'text',
                inputPlaceholder: '验证集名称',
                showCancelButton: true,
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                inputValidator: (value) => {
                    if (!value) {
                        return '验证集名称不能为空！';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    var fileName = result.value; // 获取输入的数据集名称

                    // 创建一个文件输入框
                    var fileInput = document.createElement('input');
                    fileInput.type = 'file';
                    fileInput.multiple = true; // 允许多文件选择
                    fileInput.style.display = 'none';
                    document.body.appendChild(fileInput);

                    // 文件选择后触发的事件
                    fileInput.addEventListener('change', function (event) {
                        var files = event.target.files;
                        if (files.length > 0) {
                            var formData = new FormData();
                            for (var i = 0; i < files.length; i++) {
                                formData.append('files', files[i]);
                            }

                            // 添加文件名到 FormData
                            formData.append('fileName', fileName);

                            // 发送文件到后端
                            $.ajax({
                                url: '/uploadVal', // 后端控制器的请求路径
                                type: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                success: function (response) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: '文件上传成功',
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                    console.log(response);
                                },
                                error: function (xhr, status, error) {
                                    Swal.fire({
                                        icon: 'error',
                                        title: '文件上传失败',
                                        text: '错误信息: ' + error,
                                        showConfirmButton: false,
                                        timer: 2000
                                    });
                                    console.error('请求失败:', error);
                                }
                            });
                        }
                    });

                    // 手动触发文件输入框的点击事件以打开文件选择框
                    fileInput.click();
                }
            });
        });

        // 上传验证集 Mask 文件
        $('#uploadValMaskButton').click(function () {
            Swal.fire({
                title: '请输入验证集名称',
                input: 'text',
                inputPlaceholder: '验证集名称',
                showCancelButton: true,
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                inputValidator: (value) => {
                    if (!value) {
                        return '验证集名称不能为空！';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    var fileName = result.value; // 获取输入的数据集名称

                    // 创建一个文件输入框
                    var fileInput = document.createElement('input');
                    fileInput.type = 'file';
                    fileInput.multiple = true; // 允许多文件选择
                    fileInput.style.display = 'none';
                    document.body.appendChild(fileInput);

                    // 文件选择后触发的事件
                    fileInput.addEventListener('change', function (event) {
                        var files = event.target.files;
                        if (files.length > 0) {
                            var formData = new FormData();
                            for (var i = 0; i < files.length; i++) {
                                formData.append('files', files[i]);
                            }

                            // 添加文件名到 FormData
                            formData.append('fileName', fileName);

                            // 发送文件到后端
                            $.ajax({
                                url: '/uploadValMask', // 后端控制器的请求路径
                                type: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                success: function (response) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: '文件上传成功',
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                    console.log(response);
                                },
                                error: function (xhr, status, error) {
                                    Swal.fire({
                                        icon: 'error',
                                        title: '文件上传失败',
                                        text: '错误信息: ' + error,
                                        showConfirmButton: false,
                                        timer: 2000
                                    });
                                    console.error('请求失败:', error);
                                }
                            });
                        }
                    });

                    // 手动触发文件输入框的点击事件以打开文件选择框
                    fileInput.click();
                }
            });
        });
    });


</script>
</body>
</html>
